import React, { memo } from 'react';
import { Box, Form, Card, Step } from '@alifd/next';

import st from './detail.module.scss';
import { FormattedDate, FormattedNumber } from 'react-intl';

interface Props extends LogisticsState.DeteilVO {

}

const LogisticsDetail: React.FunctionComponent<Props> = (props): JSX.Element => {
  return (
    <Card free>
      <Card.Header title="物流信息" />
      <Card.Divider />
      <Card.Content>
        <Box direction="row" spacing={20} className={st.Content}>
          <Form
            labelAlign="left"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            style={{ flex: 1 }}
            isPreview
          >
            <Form.Item label="物流单号：">
              <span className="next-form-preview">{props.shippingLabel}</span>
            </Form.Item>
            <Form.Item label="发货人：">
              <span className="next-form-preview">{props.fromName}</span>
            </Form.Item>
            <Form.Item label="联系电话：">
              <span className="next-form-preview">{props.fromTelephone}</span>
            </Form.Item>
            <Form.Item label="发货地址：">
              <div className="next-form-preview">{`${props.fromRegion} / ${props.fromLocality} / ${props.fromStreetAddress}`}</div>
              <div className="next-form-preview">{props.fromExtendAddress}</div>
            </Form.Item>
            <Form.Item label="发货时间：" colSpan={6}>
              <div className="next-form-preview">
                <FormattedDate value={props.shippingTime} hourCycle="h24" dateStyle="short" timeStyle="short" />
              </div>
            </Form.Item>
          </Form>
          <div className={st.stepBlock}>
            <Step
              current={1}
              direction="ver"
              stretch
              animation
            >
              <Step.Item title="What would youlike to test?" content="test" />
              <Step.Item
                title="What would youlike to test?"
                content="12"
              />
              <Step.Item title="A bit more on the background" content="test" />
            </Step>
          </div>
        </Box>
      </Card.Content>
    </Card>
  );
};

export default memo(LogisticsDetail);
